<!-- 操作成功就调用我的succHandle
失败调用errHandle -->
<template>
        <el-alert :title="errText" type="error" show-icon :closable="false" v-show="controlEle.error" class="error" />
        <el-alert title="操作成功" type="success" show-icon :closable="false" v-show="controlEle.success" class="error" />

</template>
<script setup>
import { reactive, ref } from 'vue';

const controlEle = reactive({
    error: false,
    success: false
})


const errText = ref('操作失败')
const errHandle = function(text){
    controlEle.error = true
    if(text != undefined || text != null){
        errText.value = text
    }
    setTimeout(()=>{
        controlEle.error = false
    }, 5000)
}

const succHandle = function(){
    controlEle.success = true
    setTimeout(()=>{
        controlEle.success = false
    }, 5000)
}

defineExpose({
    errHandle,
    succHandle
})
</script>
<style scoped>
.error {
    top: 80px;
    width: 300px;
    position: fixed;
    left: 50%;
    transform: translate(-50%);
    z-index: 100;
}
</style>